<template>
  <div class="components-container">
    <div class="header-form">
      <label class="layui-form-label">冰柜区域</label>
      <div class="layui-inline">
        <el-select v-model="icaSelectIndex" placeholder="请选择" @change="getData">
          <el-option v-for="(item,index) in iceArea" :key="item.ICAID" :label="item.ICANAME" :value="index">
          </el-option>
        </el-select>
      </div>
      <div class="layui-inline">
        <el-button type="primary" @click="getData">刷新</el-button>
      </div>
    </div>
    <!-- 冰柜图 -->
    <div v-if="isTableIce === 0" class="tableContainer" style="position: relative">
      <div v-for="y in iceAreaItem.ICAYCOUNT" :style="{width:iceAreaItem.ICAXCOUNT*left+'px',height:top}" style="clear:left">
        <div v-for="x in iceAreaItem.ICAXCOUNT" class="iceplace iceplacedefault"></div>
      </div>
      <ul class="tableIceArea">
        <li v-for="(item, index) in iceAreaInfo" :style="{left: (left*(item.ICEXP-1)) + 'px', top: (top*(item.ICEYP-1)) + 'px' }" style=" position: absolute;">
          <div class="listCenter" :class="setDivClass(item)">
            <p v-text="item.ICENO" class="itemNo">0</p>
            <div class="iceName">
              {{item.REGNAME}}
            </div>
            <div class="tableToolList">
              <ul class="tableTool">
                <li class="saveBtn" @click="operate(OPEARTCODE.CR,item)">存</li>
                <li class="takeBtn" @click="operate(OPEARTCODE.QC,item)" v-if=" item.IceUse.length != 0 ">取</li>
                <li class="takeBtnEnadble" v-else>取</li>
                <li class="moreBtn">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                                              ...
                                          </span>
                    <el-dropdown-menu slot="dropdown">
                      <div v-if="item.IceUse.length != 0">
                        <el-dropdown-item @click.native="operate(OPEARTCODE.DJ,item)">登记</el-dropdown-item>
                        <el-dropdown-item @click.native="operate(OPEARTCODE.DELETE,item)">删除</el-dropdown-item>
                        <el-dropdown-item @click.native="operate(OPEARTCODE.INFO,item)">详情</el-dropdown-item>
                      </div>
                      <div v-else>
                        <el-dropdown-item @click.native="operate(OPEARTCODE.DJ,item)">登记</el-dropdown-item>
                        <el-dropdown-item class="linkdisable">删除</el-dropdown-item>
                        <el-dropdown-item class="linkdisable">详情</el-dropdown-item>
                      </div>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 功能列表 -->
    <div>
      <ul class="toolList">
        <li v-if="btnShow(item.BTNVALUE)" v-for="(item, index) in $store.state.btnListCommon" @click="operate(item.BTNVALUE)">
          <el-button type="primary" :value="item.BTNSHOWNAME" v-text="item.BTNSHOWNAME"></el-button>
        </li>
      </ul>
    </div>
    <!-- 数据列表 -->
    <dataTable v-if="isTableIce === 1" :headList="headList" :dataList="dataList" :pageOrder="pageOrder"  @pageChange="pageChange" @selectRow="selectRow"></dataTable>
    <!-- 操作弹窗 -->
    <main-model ref="dialog" @refreshData="getData"></main-model>
  </div>
</template>

<script>
import dataTable from "@/components/Table/DataTable";
import apiBase from "@/api/apiBase.js";
import { formatDate, timeStringToDate } from "@/utils/date.js";
import mainModel from "./iceUseMain";
import {
    manage
  } from "@/mixins/managePage.js";
const REG = "登记";
const INFO = "详情";
const IN = "存入";
const OUT = "取出";
const DELETE = "删除";
export default {
  name: "iceUse",
  mixins: [manage],
  data() {
    return {
      OPEARTCODE: {
        CR: "存入",
        QC: "取出",
        MODIFY: "修改",
        DJ: "登记",
        DELETE: "删除",
        INFO: "详情"
      },
      title: null,

      left: "160",
      top: "140",
      seachdata: {
        RegnameLike: null,
        RegaddressLike: null,
        RegdateEquals: null
      },
      seachdataExtent: {
        Regdate: null
      },
      icaSelectIndex: 0,
      iceAreaItem: {
        ICAID: null
      },
      iceArea: [], //获取冰柜区域下拉框
      iceAreaInfo: [], //获取冰柜区域的冰柜及使用信息
      IceUseContainer: [],
      iceAreaInfoSearch: [], //搜索结果
      deaddata: {
        deadseachno: null,
        deadselectno: null,
        deadid: null,
        deadName: null,
        deaddate: null,
        linkMan: null,
        linkTel: null,
        deadRemark: null
      },
      ichInfo: {},
      icedata: {
        iceid: null,
        icename: null,
        iceuse: []
      },
      ichdata: {
        ichid: null,
        iceid: null,
        savedate: null,
        savetime: null,
        takedate: null,
        taketime: null
      },
      ichdataExtend: {
        ichEndDates: null,
        saveDates: null
      },
      IceUse: [], //取出  业务编号
      // 是否是图型化
      isTableIce: null,
      //分页和排序
      pageOrder: {
        orderType: null,
        orderSort: null,
        totalNum: null,
        pageSize: 10,
        currentPage: 1
      },
    };
  },
  methods: {
    //获取表头
      getlinColumn() {
        apiBase.DoService({},
          apiBase.getApiAdress().Column.GetIceUseTableColumns,
          res => {
            this.headList = res.data.content;
          }
        );
      },
    // 按钮显示
    btnShow(index){
      if(this.isTableIce === 0) return false;
      let status;
      if(this.currentRow){
        status = this.currentRow.ICHSTATUS
      }
      switch (index) {
        case REG:
        case IN:
          return true;
          break;
        case '修改':
          if(status != "B" && this.currentRow !== null) return true;
          break;
        case OUT:
        if(status != 'B' && this.currentRow !== null)
          return true
          break;
        case INFO:
        case DELETE:
          return this.currentRow !== null
          break;
      }
    },
    //功能操作
    operate(order, ice) {
      if(this.isTableIce === 1){
        ice = this.currentRow;
      }
      this.order = order;
      switch (this.order) {
        case REG:
        case IN:
        case OUT:
          this.$refs.dialog.open(this.order, ice);
          break;
        case INFO:
          if(this.isTableIce === 0){
            this.$refs.dialog.open(this.order, ice);
          }else if(this.isTableIce === 1){
            this.$refs.dialog.open('fhxq', ice);
          }
          break;
        case '修改':
          this.$refs.dialog.open(this.order, ice);
          break;
        case DELETE:
          this.$refs.dialog.open(this.order, ice);
          break;
        default:
          break;
      }
    },
    GetIchInfo() {
      let data = {
        ICHICEID: this.icedata.iceid,
        ICHREGBUSNUM: this.deaddata.deadselectno
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().IceUse.GetRegistrationAndUseByNo,
        res => {
          this.ichInfo = res.data.content;
          let reg = res.data.content.REG;
          let ich = res.data.content.ICH;
          if (reg) {
            this.deaddata.deadid = reg.REGID;
            this.deaddata.deadName = reg.REGNAME;
            this.deaddata.deaddate = reg.REGDEATHDATE;
            this.deaddata.linkMan = reg.REGHANDLERNAME;
            this.deaddata.linkTel = reg.REGHANDLERLINK;
          }
          if (ich) {
            this.ichdata.takedate = ich.ICHENDDATE;
            this.ichdata.taketime = ich.ICHENDTIME;
            this.ichdata.savedate = ich.ICHBEGDATE;
            this.ichdata.savetime = ich.ICHBEGTIME;
            this.ichdata.ichid = ich.ICHID;
            this.ichdataExtend.saveDates = timeStringToDate(
              this.ichdata.savetime,
              this.ichdata.savedate
            );
          }
        }
      );
    },
    getIceArea() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().IceUse.QueryIceArea,
        res => {
            this.iceArea = res.data.content;
            if (!this.iceArea && this.iceArea.length === 0)
            this.icaSelectIndex = null;
            setTimeout(() => {
                     this.getData();
            }, 100);
   
        }
      );
    },
    //获取冰柜区域的冰柜及使用信息
    getData() {
      if (
        this.icaSelectIndex === null ||
        this.iceArea === undefined ||
        this.iceArea.length == 0
      )
        return;
      this.iceAreaItem = this.iceArea[this.icaSelectIndex];
      if(this.isTableIce === 1){ //列表
        let datas = {
          IceicaidEquals: this.iceAreaItem.ICAID,
        }
        var data = {
          //请求体
          PageIndex: this.pageOrder.currentPage,
          PageSize: this.pageOrder.pageSize,
          OrderBy: this.pageOrder.orderType,
          OrderByType: this.pageOrder.orderSort,
          Data:datas
        };
        apiBase.DoService(data, apiBase.getApiAdress().IceUse.QuerybyUse, res => {
          this.dataList = res.data.content.OutData;
          this.pageOrder.totalNum = res.data.content.RecordCount;
        });
      } else if (this.isTableIce === 0){ //图形化
        // let datas = {
        //     ICAID: this.iceAreaItem.ICAID,
        // }
        var data = {
          //请求体
          PageIndex: this.pageOrder.currentPage,
          PageSize: this.pageOrder.pageSize,
          OrderBy: this.pageOrder.orderType,
          OrderByType: this.pageOrder.orderSort,
          ICAID: this.iceAreaItem.ICAID
        };
        apiBase.DoService(
        data,
        apiBase.getApiAdress().IceUse.QueryIceUseByArea,
        res => {
          this.iceAreaInfo = res.data.content;
          this.iceAreaInfo.forEach((item, index) => {
            if (item.IceUse !== undefined && item.IceUse.length > 0)
              item.REGNAME = item.IceUse[0].REGNAME;
            else item.REGNAME = "";
          });
        }
      );
      }
    },
    setDivClass(ice) {
      if (ice === undefined) return "";
      if (ice.IceUse === null || ice.IceUse.length == 0)
        return "iceplace iceplaceCanuse";
      else if (ice.IceUse.length == 1) return "iceplace iceplaceUseed";
      else if (ice.IceUse.length > 1) return "iceplace iceplaceMoreUseed";
    }
  },
  mounted() {
    this.getData();
  },
  created() {
    this.getIceArea();
    apiBase.DoService({}, apiBase.getApiAdress().Param.GetIsTableIce, res => {
      this.isTableIce = res.data.content;
      if(this.isTableIce === 1){
        this.getlinColumn()
      }
    });
  },
  //路由的时候刷新组件
  activated: function() {
    this.getData();
  },
  components: {
    mainModel,
    dataTable
  }
};
</script>

<style lang="less" scoped>
.longtext {
  width: 465px;
}
.btnCenter {
  text-align: center;
}
table.tableIfon {
  th {
    font-weight: normal;
  }
  td {
    text-align: left;
    padding-right: 20px;
  }
}
select::-ms-expand {
  //ie下啦箭头隐藏
  display: none;
}
select.nameOptions {
  width: 100px;
  display: inline-block;
  margin-right: 10px;
  background: transparent;
  border: none;
  box-shadow: inset 0 0px 0px rgb(255, 255, 255);
  margin: auto;
  display: block;
  text-align-last: center;
}
.datepicker-popup {
  position: fixed !important;
}
table.iceTable {
  width: 100%;
  td {
    width: 50px;
    height: 200px;
    border: 1px solid #dcdcdc;
  }
}
div.tableContainer {
  width: 100%;
  max-height: 500px;
  overflow: auto;
  margin-top: 20px;
  ul.tableIceArea {
    overflow: hidden;
    width: 100%;
    height: 100%;
    li {
      width: 150px;
      height: 130px;
      div.listCenter {
        p.itemNo {
          text-align: center;
          padding-top: 15px;
          font-size: 18px;
          color: white;
          font-weight: bold;
        }
        div.iceName {
          height: 40px;
          width: 100%;
          text-align: center;
          padding-top: 15px;
          font-size: 18px;
          color: white;
          font-weight: bold;
        }
        div.tableToolList {
          overflow: hidden;
          ul.tableTool {
            width: 90px;
            margin: 10px auto 0;
            overflow: hidden;
            height: 30px;
            li {
              float: left;
              width: 30px;
              height: 30px;
              text-align: center;
              line-height: 30px;
              padding: 0;
              margin: 0;
              cursor: pointer;
              position: inherit;
            }
            li.saveBtn {
              background: #009289;
              color: white;
            }
            li.takeBtn {
              // background: #eaeaea;
              background: #ff2021;
              color: white;
            }
            li.takeBtnEnadble {
              // background: #eaeaea;
              background: #eef1f6;
              color: #878d99;
              cursor: not-allowed;
            }
            li.moreBtn {
              background: #ef9000;
              color: white;
              span.el-dropdown-link {
                color: white;
              }
            }
          }
        }
      }
    }
  }
}
.linkdisable {
  background: #eef1f6;
  color: #878d99;
  cursor: not-allowed;
}
.iceplace {
  margin: 5px;
  width: 150px;
  height: 130px;
  float: left;
}
.iceplacedefault {
  background-color: #878d99;
}
.iceplaceCanuse {
  background-color: #67c23a;
}
.iceplaceUseed {
  background-color: #eb9e05;
}
.iceplaceMoreUseed {
  background-color: #fa5555;
}
</style>
